<script setup lang="ts">
import { computed, watchEffect } from 'vue'

const props = defineProps({
    navTitle: {
        type: String,
        default: '',
    },
    navColor: {
        type: String,
        default: '#333',
    },
    statusBar: {
        type: Boolean,
        default: true,
    },
    fixed: {
        type: Boolean,
        default: true,
    },
    border: {
        type: Boolean,
        default: false,
    },
    shadow: {
        type: Boolean,
        default: false,
    },
    back: {
        type: Boolean,
        default: true,
    },
    isDark: {
        type: Boolean,
        default: false,
    },
    backgroundUrl: {
        type: String,
        default: '',
    },
    background: {
        type: String,
        default: '',
    },
    leftText: {
        type: String,
        default: '返回',
    },
    leftIcon: {
        type: String,
        default: 'left',
    },
    buttonText: {
        type: String,
        default: '返回',
    },
    showButton: {
        type: Boolean,
        default: false,
    },
    isTab: {
        type: Boolean,
        default: false,
    },
})

const emits = defineEmits(['leftClick', 'buttonClick'])

const tabHeight = computed(() => {
    if (props.isTab)
        return 750 / uni.getSystemInfoSync().pixelRatio * 0.35

    return 0
})

async function onLeftClick() {
    if (props.back) {
        const event = await uni.navigateBack()
        console.log(event)
    }
    emits('leftClick')
}

function onButtonClick() {
    emits('buttonClick')
}

watchEffect(() => {
    // #ifdef MP-ALIPAY
    if (props.navColor === '#fff' || props.navColor === '#fffffff' || props.navColor === 'white') {
        my.setNavigationBar({
            frontColor: '#ffffff',
            backgroundColor: '#ffffff',
        })
    }
    if (props.navTitle) {
        my.setNavigationBarTitle({
            title: props.navTitle || '子弹工作',
        })
    }
    // #endif
}, {
    flush: 'pre',
})
</script>

<template>
    <view class="h-screen flex flex-col"
          :style="backgroundUrl ? `background: url(${backgroundUrl}) no-repeat;background-size: 100% 100%;` : (background ? `background: ${background};` : '')">
        <!-- #ifdef MP-WEIXIN -->
        <uni-nav-bar :title="navTitle || '子弹工作'" :color="navColor" :status-bar="statusBar" :fixed="fixed"
                     :border="border" :shadow="shadow" background-color="#ffffff00" :left-text="leftText" :left-icon="leftIcon"
                     @click-left="onLeftClick" />
        <!-- #endif -->

        <!-- #ifdef MP-ALIPAY -->
        <uni-nav-bar title="" :status-bar="statusBar" background-color="#ffffff00" :fixed="fixed" :border="border"
                     :shadow="shadow" @click-left="onLeftClick" />
        <!-- #endif -->
        <view class="flex-1 text-#333" :class="{ 'safe-pd': isTab }" :style="{ paddingBottom: `${tabHeight}rpx`, background: backgroundUrl ? `url(${backgroundUrl}) no-repeat auto;` : '' }">
            <slot name="default" />
        </view>
        <slot name="button">
            <view v-if="showButton" class="box-border px-30rpx">
                <view class="mb-30rpx h-94rpx rounded-full bg-orange text-center text-white lh-94rpx"
                      @click="onButtonClick">
                    {{ buttonText }}
                </view>
            </view>
        </slot>
    </view>
</template>

<style scoped>
.safe-pd::after {
    content: '';
    display: block;
    padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
}
</style>
